<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascadesss"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
<!--        <el-button-->
<!--            type="primary"-->
<!--            icon="el-icon-delete"-->
<!--            class="handle-del mr10"-->
<!--            @click="delAllSelection"-->
<!--        >批量删除</el-button>-->

        <el-input v-model="querys.eno" placeholder="编号" class="handle-input mr10"></el-input>
        <el-input v-model="querys.month" placeholder="月份" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click=" getData">搜索</el-button>
      </div>
      <el-table
          :data="tableData"

          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header">

        <el-table-column type="selection" width="55" align="center"></el-table-column>

        <el-table-column prop="sa"
                         label="基本工资"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.sa" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="semp"
                         label="岗位津贴"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.semp" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="shou"
                         label="物价津贴"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.shou" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sjob"
                         label="职务津贴"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.sjob" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sl"
                         label="住房补贴"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.sl" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sns"
                         label="房租"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.sns" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sot"
                         label="加班费"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.sot" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sother"
                         label="病假扣款"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.sother" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sprices"
                         label="事假扣款"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.sprices" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="srent"
                         label="旷工扣款"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.srent" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="ssalary"
                         label="其他扣款"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.ssalary" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="ssum"
                         label="实发工资"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.ssum" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
            <el-button v-if="scope.row.edit"  size="mini" icon="el-icon-refresh"
                       type="text"  @click="handleCancle(scope.row)">取消
            </el-button>
            <el-button v-if="scope.row.edit"  size="mini" icon="el-icon-refresh"
                       type="text" @click="handleSave">保存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
<!--        <el-pagination-->
<!--            background-->
<!--            layout="total, prev, pager, next"-->
<!--            :current-page="sex"-->
<!--            :page-size="55"-->
<!--            :total="pageTotal"-->
<!--            @current-change="handlePageChange"-->
<!--        ></el-pagination>-->
      </div>
    </div>

    <!-- 编辑弹出框 -->
<!--    <el-dialog title="编辑" v-model="editVisible" width="30%">-->
<!--      <el-form ref="form" :model="form" label-width="70px">-->
<!--        <el-form-item label="用户名">-->
<!--          <el-input v-model="form.dat"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="地址">-->
<!--          <el-input v-model="form.dml"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--                <span class="dialog-footer">-->
<!--                    <el-button @click="editVisible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="saveEdit">确 定</el-button>-->
<!--                </span>-->
<!--      </template>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import {fetchData_salary} from "../api/index";
export default {
  name: "tableData",
  data() {
    return {
      querys:{
        operation:"selec",
        month:"",
        eno:""
      },
      tableData:[
        {
          // sa: "2000",
          // semp :"500",
          // shou:"100",
          // sjob:"500",
          // sl:"500",
          // sns:"1000",
          // sot:"1000",
          // sother:"-500",
          // sprices:"-500",
          // srent:"-100",
          // ssalsry:"无",
          // ssum:"4500"




        }

      ]

    };
  },
  created() {
    // this.fetchData_salary();
  },
  methods: {
    //   // 获取 easy-mock 的模拟数据
      getData() {
        this.querys.operation="selec"
       fetchData_salary(this.querys).then(res => {
          console.log(res);
          console.info("123321")
          // console.log(res.data)
          this.tableData[0] = res.data;
          console.info(this.tableData[0])
          // this.pageTotal = res.pageTotal || 50;
        });
      },
    //   // 触发搜索按钮
    handleSearch() {
      // this.$set(this.sex);
      // this.getData();
    },
    //   // 删除操作
    handleDelete() {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
          .then(() => {
            this.$message.success("删除成功");
            // this.tableData.splice(index, 1);
            this.querys.operation="delet"

            fetchData_salary(this.querys).then(res =>{
              console.log(res.data)
            })
          })
          .catch(() => {});
    },
    //   // 多选操作
    //   handleSelectionChange(val) {
    //     this.multipleSelection = val;
    //   },
    //   delAllSelection() {
    //     const length = this.multipleSelection.length;
    //     let str = "";
    //     this.delList = this.delList.concat(this.multipleSelection);
    //     for (let i = 0; i < length; i++) {
    //       str += this.multipleSelection[i].name + " ";
    //     }
    //     this.$message.error(`删除了${str}`);
    //     this.multipleSelection = [];
    //   },
    //   // 编辑操作
    handleEdit(row) {
      // this.idx = index;
      // this.form = row;
      row.edit = !row.edit;
      row.disabled = true;
    },

    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    //   // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    handleCancle(row){
      row.edit = !row.edit;
      row.disabled = false;
    },
    handleSave(){
      this.querys.operation="updat"
      fetchData_salary(this.tableDatas).then(res =>{
        console.log(res.data);

        // this.tableDatas[0] = res.data


        // this.name = res.data
      })
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
